<template>
  <view>
    <uni-row :gutter="10" class="mb8">
        <uni-col :span="1.5">
            <uni-button
                type="primary"
                plain
                icon="plus"
                @click="handleAdd"
                :permissions="['collect_user:collect_user:add']"
            >新增</uni-button>
        </uni-col>
    </uni-row>
    <uni-table ref="table" :loading="loading" border stripe  emptyText="暂无更多数据" @selection-change="selectionChange">
  <uni-tr>
  					<uni-th width="50" align="center">区域id</uni-th>
  					<uni-th width="50" align="center">区域名称</uni-th>
  					<uni-th width="100" align="center">上级区域id</uni-th>
            <uni-th width="204" align="center">操作</uni-th>
  </uni-tr>
  	<!-- <uni-tr v-for="(item, index) in areaList.value" :key="index">
  					<uni-td>{{ item.id }}</uni-td>
  					<uni-td>
  						<view class="name">{{ item.areaName }}</view>
  					</uni-td>
  					<uni-td align="center">{{ item.parentAreaId }}</uni-td>
  					<uni-td>
  						<view class="uni-group" #default="scope">
  							<button class="uni-button" size="mini" type="primary" @click="handleUpdate(item)">修改</button>
  							<button class="uni-button" size="mini" type="warn" @click="handleDelete(item)">删除</button>
  						</view>
  					</uni-td>
  	</uni-tr> -->
  </uni-table>
  <view>
<!-- 	<uni-popup ref="inputDialog" type="dialog">
				<uni-popup-dialog ref="inputClose"  mode="input" title="输入内容" value="对话框预置提示内容!"
					placeholder="请输入内容" @confirm="dialogInputConfirm"></uni-popup-dialog>
			</uni-popup> -->
			    <uni-popup ref="inputDialog" type="dialog">
			       <view class="popup-content-wrapper">
			        <uni-forms ref="collect_userRef" :modelValue="form" >
			          <uni-forms-item name="areaName" label="区域名称">
			            <uni-easyinput v-model="form.areaName" placeholder="请输入区域名称" />
			          </uni-forms-item>
			          <uni-forms-item name="parentAreaId" label="上级区域id">
			            <uni-easyinput v-model="form.parentAreaId" placeholder="请输入上级区域id" />
			          </uni-forms-item>
			          
			        </uni-forms>
			        <view class="dialog-footer">
			          <uni-button type="primary" @click="submitForm">确 定</uni-button>
			          <uni-button @click="cancel">取 消</uni-button>
			        </view>
			     </view>
			    </uni-popup>
   </view>
   </view>
</template>

<script>
  import Vue from 'vue';
    import {ref} from 'vue';
  /* import uni from 'uni-app'; */
import {
  listArea,
  getArea,
  delArea,
  addArea,
  updateArea,
} from "@/api/area/area";
    export default {
      data(){
        return{
          loading: false, 
		  open:false,
          form:{},
          areaList:[],
          queryParams: {
      pageNum: 1,
      pageSize: 10,
      areaName: null,
      parentAreaId: null,
            },
                  columns: [
                    { label: '采集人员ID', prop: 'id', align: 'center' },
                    { label: '登录账号', prop: 'loginAccount', align: 'center' }
                  ]
        }
      },
      // mounted(){
      //   Vue.set(this, 'collect_userList', this.collect_userList);
      // },
    mounted() {
        // 给导航栏返回小箭头绑定点击事件
        // uni.$emit('navigateBack', this.handleBack);
    },
      methods:{
        cancel(){
          this.$refs.inputDialog.close()
        },
submitForm() {
            if (this.form.id!= null) {
                updateArea(this.form).then((response) => {
                    this.$modal.msgSuccess("修改成功");
                    this.open = false;
                     this.getList();
                });
            } else {
                addArea(this.form).then((response) => {
                    this.$modal.msgSuccess("新增成功");
                    this.open = false;
                    this.getList();
                });
            }
        
 	this.$refs.inputDialog.close()
},
		  handleAdd(){
			  this.$refs.inputDialog.open()
		  },
      handleUpdate(row) {
        // reset();
        const _id = row.id || ids.value;
        getArea(_id).then((response) => {
          
          this.form= response.data;
          this.$refs.inputDialog.open()
          // open.value = true;
          // title.value = "修改采集人员表";
        });
      },
      handleDelete(row) {
        const _ids = row.id || ids.value;
delArea(_ids);
 this.getList();
      },
         handleBack() {
           console.log(2)
                    // 这里可以添加你希望在点击返回小箭头时执行的操作，比如弹出提示框询问用户是否确认返回
                    uni.showModal({
                        title: '提示',
                        content: '确认要返回上一页面吗？',
                        success: (res) => {
                            if (res.confirm) {
                                uni.navigateBack(); // 如果用户确认，执行返回上一页面的操作
                            }
                        }
                    });
                },

       async  getList() {
  		     this.loading = true;
  		  try {
  		            const response = await listArea(this.queryParams);
  		            this.areaList.value = response.rows;
  		
  		            this.$nextTick(() => {
  		                this.loading = false;
  		                // 假设uni-table组件有refresh方法用于刷新数据展示
  		               // this.$refs.table.refresh();
  		            });
  		        } catch (error) {
  		            console.error("获取用户列表数据失败：", error);
  		            this.loading = false;
  		        }
        },
      },
  
      onLoad: function() {
        this.getList()
    
      }
    }
</script>

<style>
	.popup-content-wrapper {
	  border: 1px solid white;
	  border-radius: 5px;
	  padding: 10px;
	  background-color: white;
	}
	.dialog-footer {
	  display: flex;
	  justify-content: flex-end;
	  padding: 10px;
	
/* 	  uni-button {
	    margin-left: 10px;
	  } */
	}
</style>